<template>
  <div class="app">
    <div class="header">
      <div class="header-top">任务列表</div>
    </div>
    <div class="body-top">
      添加任务:<input
        v-focus
        v-model="todo"
        @keyup.enter="onSubmit"
        type="text"
        class="body-input"
        placeholder="输入任务名称，点击回车即可添加任务"
      />
    </div>
    <div class="body">
      <div class="body-left">
        <ul class="task-nav">
          <li v-for="obj in nav" :key="obj.title">
            {{ obj.title }}
            <span>（{{ getLenght(obj.flag) }}）</span>
          </li>
        </ul>
      </div>
      <div class="body-right">
        <div class="tasks">
          <p  v-if="showList.length == 0" class="mo-task-tip">目前暂时没有新任务</p>
          <!--任务-->
          <div v-for="(item, index) in showList" :key="index" class="todo">
            <div @click="changeState(item)" class="chos-div">
              <div v-if="item.isCom">✓</div>
            </div>
            <p
              :style="{
                color: item.isCom ? '#a7a5a5' : '#666666',
                textDecoration: item.isCom ? 'line-through' : 'none',
              }"
            >
              {{ item.title }}
            </p>
            <div>
              <button @click="deleteThis(item)" class="destroy"></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import todo from "./components/todolist";
var store = {
  get(name) {
    return JSON.parse(localStorage.getItem(name));
  },
  set(name, list) {
    return localStorage.setItem(name, JSON.stringify(list));
  },
};
export default {
  name: "App",
  components: {},
  data() {
    return {
      todo: "",
      isClick: "not", // is   all
      nav: [
        { title: "未完成任务", flag: "not" },
        { title: "已完成任务", flag: "is" },
        { title: "全部任务", flag: "all" },
      ],
      list: store.get("todoList"),
    };
  },
  computed: {
    showList() {
      let arr = [];
      switch (this.isClick) {
        case "not":
          arr = this.list.filter((item) => {
            return !item.isCom;
          });
          break;
        case "is":
          arr = this.list.filter((item) => {
            return item.isCom;
          });
          break;
        case "all":
          arr = this.list;
          break;
      }
      return arr;
    },
  },
  watch: {
    list: {
      handler(newV, oldV) {
        store.set("todoList", this.list);
      },
      deep: true,
    },
  },
  methods: {
    changeNav(flag) {
      console.log("当前项目===》", flag);
      this.active = flag;
    },
    onSubmit() {
      console.log("===>", this.todo);
      this.list.unshift({
        title: this.todo,
        isCom: false,
      });
      this.todo = "";
    },
    getLenght(flag) {
      console.log("当前>>", flag);
      let arr = [];
      switch (flag) {
        case "not":
          arr = this.list.filter((item) => {
            return !item.isCom;
          });
          break;
        case "is":
          arr = this.list.filter((item) => {
            return item.isCom;
          });
          break;
        case "all":
          arr = this.list;
          break;
      }
      return arr.length;
    },
    changeState(item) {
      item.isCom = !item.isCom;
    },
    deleteThis(item) {
      console.log("item", item);
      let index = this.list.indexOf(item);
      console.log("index", index);
      this.list.splice(index, 1);
    },
  },
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.app {
  width: 70%;
  height: 900px;
  background-color: #ddd;
  margin: auto;
  border-radius: 10px;
  box-shadow: 1px 0px 15px 5px #acb2af;
}
.header {
  height: 40px;
  background-color: #3f9cdb;
  text-align: center;
  color: #fff;
  border-radius: 10px;
  padding-top: 10px;
  font-size: 20px;
}
.body-top {
  height: 150px;
  font-size: 30px;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
p {
  padding-top: 20px;
}
li {
  list-style: none;
}
.body {
  display: flex;
  justify-content: space-around;
  &-input {
    width: 700px;
    height: 40px;
    border-radius: 10px;
    outline: none;
    font-size: 20px;
    cursor: pointer;
    text-indent: 1.5em;
  }
  &-left {
    width: 100px;
    padding-top: 20px;
  }
  &-right {
    width: 700px;
    height: 600px;
    background-color: #fff;
    border: 10px solid #eaeaea;
    border-radius: 30px;
    margin-right: 20px;
  }
}
</style>
